{% extends 'back/public/base.html' %}

{% block title %}商品添加页面{% endblock %}
{% block mycss %}
<link rel="stylesheet" href="/static/back/css/weadmin.css">
<link rel="stylesheet" href="/static/back/css/style.css">
<style>
  .layui-upload-img{margin-left:5px; margin-top:5px; height:80px;}
#prevModal {width:100%; height:100%; text-align:center; display:none;}
#prevModal img{height:500px;}
</style>
{% endblock %}

{% block currpath %}商品添加页面{% endblock %}
{% block contains%}
<div class="weadmin-body">
  <!---添加商品表单区域Start-->
  <form class="layui-form" method="post" id="addform">
    {% csrf_token %}
    <div class="layui-row">
      <blockquote class="layui-elem-quote layui-text">
        1.<i style="color:red;">*</i>&nbsp;&nbsp;为必填项！请填写完整.&nbsp;&nbsp;&nbsp;&nbsp;
        2.商品属性信息(颜色,尺寸,品牌)需在添加后才可以选择,&nbsp;&nbsp;<a href="{% url 'goods_trait_list' %}">现在就去添加</a>.
      </blockquote>
      <div id="wizard" class="layui-tab layui-tab-brief swMain">
        <ul class="layui-tab-title anchor">
          <li><a href="#step-1" class="layui-this selected" isdone="1" rel="1"><span class="stepNumber">主要参数</span></a></li>
          <li><a href="#step-2" class="disabled" isdone="0" rel="2"><span class="stepNumber">属性信息</span></a></li>
          <li><a href="#step-3" class="disabled" isdone="0" rel="3"><span class="stepNumber">详情内容</span></a></li>
        </ul>
        <div class="layui-tab-content stepContainer">
          <div class="layui-tab-item" id="step-1" style="display: block;">
            <div class="layui-col-md8 layui-col-md-offset2">
              <div class="layui-form-item">
                <label class="layui-form-label"><i style="color:red;">*</i>&nbsp;商品名称</label>
                <div class="layui-input-block">
                  <input type="text" name="g_name" lay-verify="title" autocomplete="off" placeholder="请输入商品名称" class="layui-input">
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label"><i style="color:red;">*</i>&nbsp;商品价格</label>
                <div class="layui-input-block">
                  <input type="text" name="g_price" lay-verify="required|number" placeholder="请输入商品价格" autocomplete="on"
                    class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label"><i style="color:red;">*</i>&nbsp;商品折扣</label>
                <div class="layui-input-block">
                  <input type="text" name="g_saleprice" lay-verify="saleprice" placeholder="商品折扣为0-1之间的小数,小数点后最多两位"
                    autocomplete="on" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label"><i style="color:red;">*</i>&nbsp;商品产地</label>
                <div class="layui-input-inline">
                  <select name="provid" id="provid" lay-filter="provid" lay-verify="required"></select>
                </div>
                <div class="layui-input-inline">
                  <select name="cityid" id="cityid" lay-filter="cityid"></select>
                </div>
                <div class="layui-input-inline">
                  <select name="areaid" id="areaid" lay-filter="areaid"></select>
                </div>
                <div class="layui-form-mid layui-word-aux"><span style="color:red">请选择商品产地(默认地址为北京)</span></div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label"><i style="color:red;">*</i>&nbsp;所属分类</label>
                <div class="layui-input-block">
                  <select name="g_tid" lay-verify="required">
                    {% for v in types %}
                    <option value="{{ v.id }}">{{ v.t_name}}</option>
                    {% empty %}
                    <option value=""></option>
                    {% endfor %}
                  </select>
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">是否显示</label>
                <div class="layui-input-block">
                  <input type="checkbox" checked="" name="g_isdel" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">是否包邮</label>
                <div class="layui-input-block">
                  <input type="radio" name="g_mall" value="包邮" title="包邮" checked="">
                  <input type="radio" name="g_mall" value="不包邮" title="不包邮">
                </div>
              </div>

              <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">商品简介</label>
                <div class="layui-input-block">
                  <textarea placeholder="暂无商品简介" name="g_intro" class="layui-textarea"></textarea>
                </div>
              </div>

            </div>
          </div>
          <div class="layui-tab-item" id="step-2" style="display: none;height:480px">
            <div class="layui-col-md8 layui-col-md-offset2">
              <div class="layui-form-item">
                <label class="layui-form-label">简介标题</label>
                <div class="layui-input-block">
                  <input type="text" name="g_title" autocomplete="on" placeholder="请输入简介标题" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">商品类型</label>
                <div class="layui-input-block">
                  <select name="g_type">
                    <option value="">请选择商品类型</option>
                    <option value="0">正常</option>
                    <option value="1">新品</option>
                    <option value="2">热卖</option>
                  </select>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">商品颜色</label>
                <div class="layui-input-block">
                  <select name="i_color">
                    <option value="">请选择商品颜色</option>
                    {% for v in color %}
                    <option value="{{ v.a_name }}">{{ v.a_name }}</option>
                    {% empty %}
                    <option value="">请选择商品颜色</option>
                    {% endfor %}
                  </select>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">商品尺寸</label>
                <div class="layui-input-block">
                  <select name="i_size">
                    <option value="">请选择商品尺寸</option>
                    {% for v in size %}
                    <option value="{{ v.a_name }}">{{ v.a_name }}</option>
                    {% empty %}
                    <option value="">请选择商品尺寸</option>
                    {% endfor %}
                  </select>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">商品品牌</label>
                <div class="layui-input-block">
                  <select name="i_pinpai">
                    <option value="">请选择商品属性</option>
                    <option value="华为">华为</option>
                    <option value="小米">小米</option>
                    <option value="OPPO">OPPO</option>
                    <option value="VIVO">VIVO</option>
                    <option value="苹果">苹果</option>
                  </select>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">商品图片</label>
                <div class="layui-input-block">
                  <div class="layui-upload">
                    <button type="button" class="layui-btn" id="upgoods">上传商品图片</button>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                      预览图：
                      <div class="layui-upload-list" id="showpic"></div>
                    </blockquote>
                  </div>
                </div>
                <input type="hidden" name="p_pic" id="up_pic" value="" />
              </div>
            </div>

          </div>
          <div class="layui-tab-item" id="step-3" style="display: none;">

            <div class="layui-form-item layui-form-text">
              <label class="layui-form-label">商品详情</label>
              <div class="layui-input-block">
                <textarea class="layui-textarea layui-hide" name="i_info" lay-verify="content" id="goods_detail"></textarea>
              </div>
            </div>

          </div>
        </div>
      </div>


    </div>

  </form>
  <!--添加商品表单区域End-->

</div>
{% endblock %}

{% block setjs %}

<script type="text/javascript" src="/static/back/js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="/static/back/js/data.js"></script>
<script type="text/javascript" src="/static/back/js/province.js"></script>
<script type="text/javascript" src="/static/back/js/jquery.smartWizard.js"></script>
<script type="text/javascript">
  var defaults = {
    s1: 'provid',
    s2: 'cityid',
    s3: 'areaid',
    v1: null,
    v2: null,
    v3: null
  };
  //分步添加商品
  $(document).ready(function () {

    $('#wizard').smartWizard();

  });

</script>
<script>
  layui.extend({
    admin: '{/}/static/back/js/admin'
  });
  layui.use(['jquery', 'form', 'table', 'admin', 'element', 'upload', 'layer', 'layedit'], function () {
    var $ = layui.jquery,
      form = layui.form,
      table = layui.table,
      element = layui.element,
      upload = layui.upload,
      layer = layui.layer,
      layedit = layui.layedit,
      admin = layui.admin;

    //自定义验证规则
    form.verify({
      title: function (value) {
        if (value.length < 2) {
          return '商品名称至少得2个字符!';
        }
      },
      saleprice: [/\b(0(\.\d{1,2})?)|1\b/, '折扣为0-1之间的小数']
    });

    //表单重载
    $(function () {
      form.render();
    });

    //商品图片上传
    var path = []
    upload.render({
      elem: '#upgoods'
      , url: '{% url 'upgoods_load' %}'
        , multiple: true  //多文件上传
      , auto: true     //自动上传
      //,bindAction: '#subtn'  //绑定上传的按钮
      , number: 5
      , accept: 'images'
      , choose: function (obj) {
        var files = obj.pushFile(); //将每次选择的文件追加到文件队列
        //图像预览，如果是多文件，会逐个添加。(不支持ie8/9)
        obj.preview(function (index, file, result) {
          console.log(index, file)
          var imgobj = new Image(); //创建新img对象
          imgobj.src = result; //指定数据源
          imgobj.className = 'layui-upload-img';
          imgobj.onclick = function (result) {
            //单击预览
            img_prev.src = this.src;
            //var w = $(window).width() - 142, h = $(window).height() - 142;
            var w = 500, h = 500
            console.log(w, h)
            layer.open({
              title: '预览',
              type: 1,
              area: [w, h], //宽高
              shadeClose: true,
              content: $('#prevModal')
            });
          };
          //console.log(files)
          document.getElementById("showpic").appendChild(imgobj); //添加到预览区域
        });
      }
        < !--, before: function (obj) {
        -->
            < !--//预读本地文件示例，不支持ie8-->
            < !--var files = obj.pushFile(); -->
            < !--obj.preview(function (index, file, result) {
        -->
                < !--console.log(result)-->
                < !--$('#showpic').append('<div class="imgBox"><em class="remove_' + index + '">删除</em><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img"></div>')-->
                < !--$('.remove_' + index).bind('click', function () {
        -->
                    < !--delete files[index];//删除指定图片-->
                    < !--$(this).parent().remove(); -->
                < !--})-->
            < !--}); -->
        < !--}-- >

        , done: function (res, index, upload) {
        //console.log(res.data.src[0])

        if (res.code == 0) {
          path.push(res.data.src[0])
        }
        $('#up_pic').val(path)
        //如果上传失败
        if (res.code > 0) {
          return layer.msg(res.msg, { time: 2000, icon: 5, offset: '20px', anim: 6 });
        }
        //上传成功
      }
      , error: function () {
        //演示失败状态，并实现重传
        var demoText = $('#demoText');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function () {
          uploadInst.upload();
        });
      }
    });


    //配置富文本编辑器
    layedit.set({
      uploadImage: {
        url: '{% url 'goodsupload' %}'
            , type: 'post' //默认post
        , success: function (res) {
          console.log(res)
          if (res.filename) {
            layer.msg(res.msg, {
              icon: 1,
              time: 1000,
              shade: 0.1
            });
            var val = $('#L_content').val();
            $('#L_content').val(val + '<img src="' + res.filename + '">');
          } else {
            layer.msg(res.msg, {
              icon: 5
            });
          }
        }
      }
    });

    layedit.build('goods_detail', {
      height: 400
    });

    //提交
    form.on('submit(subtn)', function (data) {
      var addform = $("#addform").serialize();
      console.log(addform)
      //提交数据
      $.ajax({
        async: false,
        data: addform,
        type: 'POST',
        dataType: 'json',
        success: function (result) {
          console.log(result)
          if (result.code == 1) {
            layer.msg(result.msg, { time: 2000, icon: 6, offset: '20px', anim: 6 }, function () {
              location.href = res.href
            });
          } else {
            layer.msg(result.msg, { time: 2000, icon: 2, offset: '20px', anim: 6 });
          }
        },
        error: function () {
          layer.msg('数据不正确或未知错误', { time: 2000, icon: 2, offset: '20px', anim: 6 });

        },
        url: "{% url 'goodsadd' %}" // 这里写你要验证的地址哦。
      });
      return false;
    });


  });
</script>

{% endblock %}
